<template>
  <div>
    <template>

      <Card style="width:1050px;margin: auto;">
        <row type="flex" justify="space-between">
          <i-col>
            <br>

            <span class="key" style="margin-left: 20px;margin-right: 10px">半成品分类代码:</span>
            <Select v-model="formLeft.categoryCode" clearable style="width: 180px" filterable>
              <Option v-for="item in CategoryFindAllList" :value="item.code" :key="item.code">{{ item.code }}--{{ item.name }}
              </Option>
            </Select>


            <span class="key" style="margin-left: 50px;">规格代码:</span>
            <Select v-model="formLeft.specificationsCode" clearable style="width: 180px;margin-left: 10px" filterable>
              <Option v-for="item in SpecificationsList" :value="item.code" :key="item.code" >{{ item.code }}--{{ item.name }}
              </Option>
            </Select>

            <span class="key" style="margin-left: 50px">颜色代码:</span>
            <Select v-model="formLeft.colourCode" clearable style="width: 180px;margin-left: 10px" filterable>
              <Option v-for="item in ColourList" :value="item.code" :key="item.code" >{{ item.code }}--{{ item.name }}
              </Option>
            </Select>

            <br>
            <br>
            <span class="key" style="margin-left:20px;margin-right: 10px">半成品材质代码:</span>
            <Select v-model="formLeft.materialQualityCode" clearable style="width: 180px;margin-left: 0px" filterable>
              <Option v-for="item in MaterialQualityList" :value="item.code" :key="item.code" >{{ item.code }}--{{ item.name }}
              </Option>
            </Select>


            <span class="key" style="margin-left: 50px">厂家代码:</span>
            <Select v-model="formLeft.manufactorCode" clearable style="width: 180px;margin-left:10px" filterable>
              <Option v-for="item in ManufactorList" :value="item.code" :key="item.code" >{{ item.code }}--{{ item.name }}
              </Option>
            </Select>

            <span class="key" style="margin-left: 50px">类型代码:</span>
            <Select v-model="formLeft.type" clearable style="width: 180px;margin-left:10px" filterable>
              <Option v-for="item in SemiTypeList" :value="item.code" :key="item.code" >{{ item.code }}--{{ item.name }}
              </Option>
            </Select>

            <br><br>

            <span class="key" style="margin-left: 20px">物料类型:</span>
            <Select v-model="formLeft.materialType" clearable style="width: 180px;margin-left:50px" filterable>
              <Option v-for="item in materialType1" :value="item.typeName" :key="item.typeName" >{{ item.typeName }}
              </Option>
            </Select>

            <br><br>
            <div style="height: 10px;margin-left: 10px">
              <span class="key" style="margin-left: 10px">价格/元:</span>
              <InputNumber :max="100000" :min="0.0001" v-model="formLeft.price" :maxlength="10"
                           placeholder="请输入价格,如:0.1"
                           style="width:180px;margin-left: 60px;"></InputNumber>

              <div style="margin-left: 600px;margin-top: -5px">
                {{ formLeft.code }}
              </div>
            </div>

            <br><br>
            <span class="key" style="margin-left: 20px">描述:</span>
            <Input type="textarea" v-model="formLeft.describe" style="width:180px;margin-left: 77px"></Input>

            <span class="key" style="margin-left: 50px">合成名称:</span>
            <Input  v-model="formLeft.name" style="width:180px;margin-left: 10px"></Input>
            <br><br>
            <Button type="warning" @click="find" style="float: left;margin-left: 150px;">合成编码</Button>
            <Button type="primary" @click="SemiProductsUpdateById" style="margin-left: 180px">修改</Button>
            <Button type="success" style="margin-left: 180px" @click="back">返回</Button>
          </i-col>
        </row>
      </Card>


    </template>
  </div>
</template>

<script>
  import {CategoryFindAll, MaterialQualityFindAll, SpecificationsFindAll, ColourFindAll,ManufactorFindAll,SemiTypeFindAll,SemiProductsFindById,MaterialTypeFindAll,SemiProductsUpdateById} from "../../../api/data"

  export default {
    data() {
      return {
        page: 1,//page 第几页
        pageSize: 1000,//pageSize:每页几条数据
        CategoryFindAllList: [],
        MaterialQualityList: [],
        SpecificationsList: [],
        ColourList: [],
        ManufactorList: [],
        materialType1:[],
        SemiTypeList:[],
        makingsState: '半成品',
        state: '1',
        formLeft: {
          id:'',
          categoryCode: '',
          materialQualityCode: '',
          specificationsCode: '',
          colourCode: '',
          manufactorCode: '',
          price: 0,
          code: '',
          describe: '',
          materialType:'',
        },
      }
    },
    mounted() {
        const codeFlag = this.$route.query.id;
        if(codeFlag){
          this.formLeft.id = codeFlag;
          this.SemiProductsFindById();
        }

      //材质分类
      this.CategoryFindAll();
      //材质
      this.MaterialQualityFindAll();
      //规格
      this.SpecificationsFindAll();
      //类型
      this.SemiTypeFindAll();
      //颜色
      this.ColourFindAll();
      //厂家
      this.ManufactorFindAll();
      //物料类型
      this.MaterialTypeFindAll();
    },
    methods: {
      CategoryFindAll() {
        var data = {
          page: this.page,
          pageSize: this.pageSize,
          makingsState: this.makingsState,
          state: this.state
        };
        CategoryFindAll(data).then(data => {
          if (data.data.code == 0) {
            this.CategoryFindAllList = data.data.data.list;
          }
        })
      },
      MaterialQualityFindAll() {
        var data = {
          page: this.page,
          pageSize: this.pageSize,
          makingsState: this.makingsState,
          state: this.state
        };
        MaterialQualityFindAll(data).then(data => {
          if (data.data.code == 0) {
            this.MaterialQualityList = data.data.data.list;
          }
        })
      },
      SpecificationsFindAll() {
        var data = {
          page: this.page,
          pageSize: this.pageSize,
          makingsState: this.makingsState,
          state: this.state
        };
        SpecificationsFindAll(data).then(data => {
          if (data.data.code == 0) {
            this.SpecificationsList = data.data.data.list;
          }
        })
      },
      ColourFindAll() {
        var data = {
          page: this.page,
          pageSize: this.pageSize,
          state: this.state
        };
        ColourFindAll(data).then(data => {
          if (data.data.code == 0) {
            this.ColourList = data.data.data.list;
          }
        })
      },
      MaterialTypeFindAll() {
        var data = {
          page: this.page,
          pageSize: this.pageSize,
        };
        MaterialTypeFindAll(data).then(data => {
          if (data.data.code == 0) {
            this.materialType1 = data.data.data.list;
          }
        })
      },
      ManufactorFindAll() {
        var data = {
          page: this.page,
          pageSize: this.pageSize,
          state: this.state
        };
        ManufactorFindAll(data).then(data => {
          if (data.data.code == 0) {
            this.ManufactorList = data.data.data.list;
          }
        })
      },
      SemiTypeFindAll() {
        var data = {
          page: this.page,
          pageSize: this.pageSize,
          state: this.state
        };
        SemiTypeFindAll(data).then(data => {
          if (data.data.code == 0) {
            this.SemiTypeList = data.data.data.list;
          }
        })
      },
      find() {
        if ( this.formLeft.categoryCode== null ||this.formLeft.categoryCode.length <= 0) {
          this.formLeft.categoryCode = 'x'
        }
        if ( this.formLeft.type== null || this.formLeft.type.length <= 0) {
          this.formLeft.type = 'xx'
        }
        if ( this.formLeft.specificationsCode== null || this.formLeft.specificationsCode.length <= 0) {
          this.formLeft.specificationsCode = 'xxx'
        }
        if ( this.formLeft.colourCode== null || this.formLeft.colourCode.length <= 0) {
          this.formLeft.colourCode = 'xxxx'
        }
        if ( this.formLeft.materialQualityCode== null || this.formLeft.materialQualityCode.length <= 0) {
          this.formLeft.materialQualityCode = 'xxx'
        }
        if ( this.formLeft.manufactorCode== null || this.formLeft.manufactorCode.length <= 0) {
          this.formLeft.manufactorCode = 'xxxx'
        }
        this.formLeft.code = this.formLeft.categoryCode + this.formLeft.specificationsCode + this.formLeft.type+ this.formLeft.colourCode
          + this.formLeft.materialQualityCode + this.formLeft.manufactorCode;
      },
      SemiProductsUpdateById() {
        SemiProductsUpdateById(this.formLeft).then(res => {
          if (res.data.code==0){
            this.$Message.success("修改成功");
            this.$router.go(-1);
          } else {
            this.$Message.error( "添加失败");
          }
        })
      },
      SemiProductsFindById(){
        var data =  {
          id:this.formLeft.id,
        }
        SemiProductsFindById(data).then(res => {
          this.formLeft = res.data.data;
        //  console.log(this.formLeft)
        })
      },
      back() {
        this.$router.go(-1);
      },

    }
  }
</script>

<style>
  .width-condition {
    width: 150px;
    margin-left: 10px;
    margin-right: 10px;
  }

</style>
